<template>
  <view class="container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <input class="search-input" placeholder="搜索电站名称或地址" />
      <text class="search-btn">搜索</text>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-grid">
      <view class="menu-item" @click="goToPage('/pages/station/list')">
        <image class="menu-icon" src="/static/icons/station.png"></image>
        <text class="menu-text">找电站</text>
      </view>
      <view class="menu-item" @click="goToPage('/pages/order/list')">
        <image class="menu-icon" src="/static/icons/order.png"></image>
        <text class="menu-text">我的订单</text>
      </view>
      <view class="menu-item" @click="goToPage('/pages/wallet/index')">
        <image class="menu-icon" src="/static/icons/wallet.png"></image>
        <text class="menu-text">我的钱包</text>
      </view>
      <view class="menu-item" @click="goToPage('/pages/car/bind')">
        <image class="menu-icon" src="/static/icons/car.png"></image>
        <text class="menu-text">车辆绑定</text>
      </view>
    </view>
    
    <!-- 附近电站 -->
    <view class="section-title">
      <text class="title-text">附近电站</text>
      <text class="more-text" @click="goToPage('/pages/station/list')">查看更多 ></text>
    </view>
    
    <view class="station-list">
      <view class="station-item" v-for="station in stationList" :key="station.id" @click="goToStationDetail(station.id)">
        <view class="station-info">
          <view class="station-name">{{ station.name }}</view>
          <view class="station-distance">{{ station.distance }}</view>
          <view class="station-address">{{ station.address }}</view>
        </view>
        <view class="station-status">
          <view class="station-price">{{ station.price }}</view>
          <view class="station-guns">空闲{{ station.availableGunCount }}/{{ station.gunCount }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '../../api/index.js'

export default {
  data() {
    return {
      stationList: []
    }
  },
  onLoad() {
    this.getNearbyStations()
  },
  methods: {
    // 获取附近电站
    async getNearbyStations() {
      try {
        const res = await api.station.getNearbyStations()
        if (res.code === 200) {
          this.stationList = res.data
        }
      } catch (error) {
        console.error('获取附近电站失败:', error)
      }
    },
    
    // 跳转页面
    goToPage(url) {
      uni.navigateTo({
        url: url
      })
    },
    
    // 跳转到电站详情
    goToStationDetail(id) {
      uni.navigateTo({
        url: `/pages/station/detail?id=${id}`
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 30rpx;
}

.search-input {
  flex: 1;
  padding: 10rpx;
  font-size: 28rpx;
}

.search-btn {
  color: #007aff;
  font-size: 28rpx;
}

.menu-grid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40rpx;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.menu-text {
  font-size: 24rpx;
  color: #333;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title-text {
  font-size: 32rpx;
  font-weight: bold;
}

.more-text {
  font-size: 24rpx;
  color: #999;
}

.station-list {
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
}

.station-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.station-item:last-child {
  border-bottom: none;
}

.station-info {
  flex: 1;
}

.station-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.station-distance {
  font-size: 24rpx;
  color: #007aff;
  margin-bottom: 10rpx;
}

.station-address {
  font-size: 24rpx;
  color: #999;
}

.station-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.station-price {
  font-size: 28rpx;
  color: #ff6600;
  margin-bottom: 10rpx;
}

.station-guns {
  font-size: 24rpx;
  color: #333;
}
</style>